<template>
  <el-cascader
    v-model="ids"
    ref="areaCascader"
    :options="list"
    @change="selectArea"
    :props="props"
    clearable
    filterable
    style="width: 100%"
  >
  </el-cascader>
</template>

<script>
// import area from '@/assets/js/area';
export default {
    props:{
        value:{
            type: String,
        },
        name:{
            type: String,
        }
    },
    data(){
        return{
            list:[],
            props:{
                value: 'id',
                label: 'name',
                children: 'list'
            },
        }
    },
    async created(){
        let areaList = await this.$request('get', '/web/index.php?_mall_id=1&r=district/index&level=3', {});
        this.list = areaList.district;
    },
    computed:{
        ids: {
            get(){
                if(this.value){
                    return this.value.split(',').map(item => Number(item));
                }else{
                    return []
                }    
            },
            set(newVal){
                // console.log(newVal);
            }            
        },
    },
    methods:{
        selectArea(val){
            this.ids = val;
            let names = [];
            if(val.length > 0){
                let province = this.list.find(item => item.id == val[0]);
                let city = province.list.find(item => item.id == val[1]);
                let region = city.list.find(item => item.id == val[2]);
                names = [province.name, city.name, region.name];
            }
            this.$emit('update:value', val.join(','));
            this.$emit('update:name', names.join('/'));
            this.$emit('confirm',{ids: val, names: names});
        },
    }
}
</script>

<style>
</style>